<template>
  <div class="reply_class">
    <h1 align="center" style="color: rgb(110, 150, 160);">{{home.replyName}}</h1><br>
    <div class="div_el_card">
      <el-card class="el_card" shadow="hover">
        <div style="width: 77%;margin-left: 4%">
          <span style="font-size: 24px;font-weight: 600">题目{{status+1}}/{{tableTable.length}}:</span>
          <span style="font-size: 18px;height: 80px;color: #17B3A3;display: block;margin-left: 10%">{{dataForm.titleName}}</span>
        </div>
        <div style="width: 100%;margin-left: 4%;margin-top: 30px">
          <span style="font-size: 16px;font-weight: 500;">答辩类型：</span><span style="font-size: 14px;color: #17B3A3">{{dataForm.subjectType.typeName}}</span><br><br>
          <span style="font-size: 16px;font-weight: 500;">答辩难度：</span><span style="font-size: 14px;color: #17B3A3">{{dataForm.subjectDifficlty.difficultyName}}</span>
        </div>
        <div style="width: 100%;margin-left: 4%;margin-top: 20px">
          <span style="font-size: 16px;font-weight: 500;">题目描述：</span><span style="font-size: 14px;color: #17B3A3">{{dataForm.subiectDesc}}</span>
        </div>
        <div style="width: 100%;margin-left: 4%;margin-top: 20px">
          <span style="font-size: 16px;font-weight: 500;">创建时间：</span><span style="font-size: 14px;color: #17B3A3">{{editTime(dataForm.beginData)}}</span>
          <span style="font-size: 16px;font-weight: 500;margin-left: 30px">答题时间：</span><span style="font-size: 14px;color: #17B3A3">{{dataForm.timeLimit}}分钟</span>
        </div>

<!--        视频-->
        <div class="video_class">
          <rtcData ref="start"></rtcData>
        </div>

<!--        用户答题区-->
        <div style="width: 100%;margin-left: 4%;margin-top: 50px">
          <el-input
            :disabled="disabled"
            style="width: 90%"
            type="textarea"
            :autosize="{ minRows: 4, maxRows: 10}"
            placeholder="请作答！"
            v-model="form[status].standardAnswer">
          </el-input>

        </div>
<!--        倒计时-->
        <div class="time_class">
          <span style="font-size: 16px;font-weight: 500">⏱️ 倒计时：</span>
          <span style="color: #17B3A3;">{{time}}s</span><br><br>
          <el-button :disabled="timeDisabledOne" @click="pauseTime">⏸️暂停</el-button><br>
          <el-button style="margin-top: 5px;" :disabled="timeDisabledTwo" @click="startTime">▶️开始</el-button><br>
          <el-button :disabled="status!==tableTable.length-1" style="margin-top: 5px;" @click="submitData">⏹️提交</el-button>
        </div>

<!--        下一题-->
        <div style="width: 100%;margin-left: 4%;margin-top: 30px">
          <el-button v-if="status!==tableTable.length-1" @click="nextQuestion" style="background: #17B3A3;color: #ffffff;width: 90%">下一题</el-button>
          <el-button v-if="status===tableTable.length-1" @click="submitData" type="success" style="color: #ffffff;width: 90%">交卷</el-button>
        </div>

      </el-card>

    </div>
  </div>
</template>

<script>
import moment from 'moment'
import Utils from "../../../assets/js/util";
import rtcData from './RTC'
import { setInterval, clearInterval } from "timers";

export default {
  name: "reply",
  data() {
    return {
      home: null,
      tableTable: [],
      dataForm: {},
      form: [],
      time: 300,
      timeOne: undefined,
      disabled: false,
      timeDisabledOne: false,
      timeDisabledTwo: true,
      id: 1,
      status: 0,
      beginTime: null,
      showTime: null,
      stop: false
    }
  },
  components:{rtcData},
  methods: {
    async getData(){
      var date = new Date();
      this.beginTime = new Date();

      var year = date.getFullYear();        //年 ,从 Date 对象以四位数字返回年份
      var month = date.getMonth() + 1;      //月 ,从 Date 对象返回月份 (0 ~ 11) ,date.getMonth()比实际月份少 1 个月
      var day = date.getDate();             //日 ,从 Date 对象返回一个月中的某一天 (1 ~ 31)

      var hours = date.getHours();          //小时 ,返回 Date 对象的小时 (0 ~ 23)
      var minutes = date.getMinutes();      //分钟 ,返回 Date 对象的分钟 (0 ~ 59)
      var seconds = date.getSeconds();      //秒 ,返回 Date 对象的秒数 (0 ~ 59)

      //获取当前系统时间
      var currentDate = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;

      //修改月份格式
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }

      //修改日期格式
      if (day >= 0 && day <= 9) {
        day = "0" + day;
      }

      //修改小时格式
      if (hours >= 0 && hours <= 9) {
        hours = "0" + hours;
      }

      //修改分钟格式
      if (minutes >= 0 && minutes <= 9) {
        minutes = "0" + minutes;
      }

      //修改秒格式
      if (seconds >= 0 && seconds <= 9) {
        seconds = "0" + seconds;
      }

      //获取当前系统时间  格式(yyyy-mm-dd hh:mm:ss)
      this.showTime = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
    },
    submitData(){//交卷
      const that = this
      that.status = this.tableTable.length
      this.StopStart();//关闭视频
      this.stop = true
    },
    async nextQuestion(){//下一题
      const that = this
      that.status=that.status+1
      this.utlsStart();//关闭视频
      this.editDataForm();

    },
    editTime(val){//日期处理
      const date = val
      if (date === undefined) {
        return ''
      }
      return moment(date).format('yyyy-MM-DD HH:mm:ss')
    },
    pauseTime(){//暂停倒计时
      clearInterval(this.timeOne)
      this.disabled = true
      this.timeDisabledTwo = false
      this.timeDisabledOne = true
    },
    startTime(){//开始倒计时
      clearInterval(this.timeOne)
      this.disabled = false
      this.timeDisabledTwo = true
      this.timeDisabledOne = false
      this.timeOne = setInterval(() => {
        if (this.time>=1){
          --this.time
        }else{
          clearInterval(this.timeOne)
          if (this.status!==this.tableTable.length-1){
            this.nextQuestion();
          }else{
            this.submitData();
          }
        }
      },1000)
    },
    async findData(){//获取当前答辩室的题目
      await this.$http({
        url: this.$http.adornUrl(`/reply/subjectreply/findbygroupid/${this.home.id}`),
        method: 'get'
      }).then(({data}) => {
        const that = this;
        if (data && data.code === 0) {
          this.tableTable = data.data
          if (this.tableTable.length!==0){
            for (let i=0;i<this.tableTable.length;i++){
              that.form.push({id: '',standardAnswer: '',urlVideo: '',urlData: ''})
            }
            this.editDataForm();
          }
        }
      })
    },
    editDataForm(){
      const that = this;
      this.dataForm = this.tableTable[this.status];
      this.dataForm.subjectType = JSON.parse(this.dataForm.subjectType)
      this.dataForm.subjectDifficlty = JSON.parse(this.dataForm.subjectDifficlty)
      this.time = this.dataForm.timeLimit * 60
      that.form[that.status].id = this.dataForm.id
      this.startTime();
    },
    async utlsStart(){
      Utils.$emit('start','startV');
    },
    async StopStart(){
      Utils.$emit('stop','startV');
    },
    async utlsDownload(){
      Utils.$emit('download','startD');
    }
  },
  async mounted() {
    const that = this;
    if(this.$route.query.data===undefined){
      this.$message({
        message: '请先选择答辩室！',
        type: 'error',
        duration: 1500,
        onClose: () => {
          // 调用全局挂载的方法
          this.$store.dispatch('reply/reply', this.$route)
          // 调用关闭标签方法
          Utils.$emit('demo','msg');
          this.$router.push({path:'reply-answerroom'})
        }
      })
    }else{
      that.home = JSON.parse(this.$route.query.data)
      this.getData();
      this.findData();
    }

    // 接收 URL
    await Utils.$on('url', function (msg) {
      that.form[that.status-1].urlVideo = msg
    })

    // 接收 URLData
    await Utils.$on('urlData', function (msg) {
      // that.form[that.status-1].urlData = msg
      console.log(that.form)
      this.$http({
        url: this.$http.adornUrl(`/reply/oss/videofile`),
        method: 'post',
        data: this.$http.adornData({
          'videoUrl': msg
        })
      }).then(({data}) => {
        if (data && data.code === 0) {
          that.form[that.status-1].urlData = data.imageUrl
        } else {
          that.form[that.status-1].urlData = '服务器故障！'
        }
        //交卷
        if (that.stop){
          this.$http({
            url: this.$http.adornUrl(`/reply/replyrecord/savereply`),
            method: 'post',
            data: this.$http.adornData({
              'form': that.form,
              'beginTime': that.beginTime,
              'home': that.home
            })
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$message({
                message: '交卷成功！',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  that.$store.dispatch('reply/reply', that.$route)
                  // 调用关闭标签方法
                  Utils.$emit('demo','msg');
                  that.$router.push({path:'reply-answerroom'})
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        }
      })

    })
  }
}
</script>

<style>


  .el-button+.el-button {
    margin-left: 0px;
  }
  .data_show{
    position: fixed;
    width: 4%;
    top: 28%;
    right: 5%;
  }

  .time_class{
    position: fixed;
    width: 10%;
    top: 28%;
    right: 8%;
  }

  .video_class{
    position: fixed;
    width: 16%;
    top: 43%;
    right: 25%;
  }

  .el_card{
    float: right;
    margin-right: 5%;
    width: 80%;
    height: 80%;
  }

  .div_el_card{
    width: 100%;
    height: 100%;
    left: 30px;
  }

  .reply_class{
    position:fixed;
    top: 98px;
    right: 3px;
    width:95%;
    height:86%;
    background:url("../../../assets/img/4k.png");
    opacity: 80%;
    background-size:100% 100%
  }
</style>
